<template>
	<view class="verify-wrapper" @touchstart.prevent.stop="stop" @touchmove.prevent.stop="stop" @touchend.prevent.stop="stop">
		<view class="verify-title">登录验证</view>
		<view class="verify-bg-wrapper">
			<view class="verify-bg">
				<image :src="imgUrl" />
			</view>
			<image :src="miniImgUrl" class="verify-block"
				:style="{transform:'scale('+ratio+')',top:blockOffset+'px',left:changeLeft+'px',width:blockWidth+'px',height:blockHeight+'px'}" />
			<u-icon name="reload" color="#ffffff" size="40" class="verify-refresh" @click="refresh" />
		</view>
		<tui-slide-verify ref="slideVerify" :active-border-color="themeColor" :activeBgColor="themeColor" :check-color="themeColor"
			class="verify-slider" @success="sliderSuccess" @change="sliderChange"></tui-slide-verify>
	</view>
</template>

<script>
	import tuiSlideVerify from "@/components/tui-slide-verify/tui-slide-verify.vue"
	export default {
		name: "VerifySlider",
		components: {
			tuiSlideVerify
		},
		props: {
			themeColor:{
				type: String,
				default: '#1890ff'
			},
			// block width
			blockWidth: {
				type: Number,
				default: 50,
			},
			// block height
			blockHeight: {
				type: Number,
				default: 50,
			},
			// canvas width
			w: {
				type: Number,
				default: 400,
			},
			// canvas height
			h: {
				type: Number,
				default: 200,
			},
			block_y: {
				type: Number,
				default: 0,
			},
			sliderText: {
				type: String,
				default: '向右滑动',
			},
			imgUrl: {
				type: String,
				default: '',
			},
			miniImgUrl: {
				type: String,
				default: '',
			}
		},
		data() {
			return {
				ratio: 1,
				blockSize: this.blockWidth,
				blockOffset: this.block_y,
				changeLeft: 0,
				showSlide: true
			};
		},
		watch: {
			block_y: {
				handler(newVal) {
					// console.log(this.ratio)
					this.blockSize = this.ratio * this.blockWidth
					this.blockOffset = this.ratio * this.block_y - ((this.blockWidth - this.blockSize) / 2)
				},
				immediate: true
			}
		},
		mounted() {
			const contentWidth = ((uni.getSystemInfoSync().windowWidth) * 0.9 - 30)
			this.ratio = contentWidth / this.w
			// console.log(this.ratio)
			this.blockSize = this.ratio * this.blockWidth
			this.blockOffset = this.ratio * this.block_y - ((this.blockWidth - this.blockSize) / 2)
		},
		methods: {
			sliderChange(left) {
				// console.log(left)
				this.changeLeft = left
			},
			sliderSuccess() {
				const realLeft = this.changeLeft / this.ratio
				this.$emit('change', realLeft)
			},
			refresh() {
				this.reset()
				this.$emit('refresh')
			},
			reset() {
				this.changeLeft = 0
				this.$nextTick(() => {
					this.$refs.slideVerify && this.$refs.slideVerify.resetSlider()
				})
			},
      stop(e){},
		}
	}
</script>

<style lang="scss" scoped>
	.verify-wrapper {
		padding: 15px;
		padding-top: 45px;
		position: relative;

		.verify-title {
			position: absolute;
			line-height: 30rpx;
			font-size: $font-base;
			top: 15px;
			left: 0;
			right: 0;
			text-align: center;
		}

		.verify-bg-wrapper {
			width: 100%;
			height: calc((90vw - 30px) / 2);
			position: relative;
			border-radius: 4rpx;

			.verify-bg {
				width: 100%;
				height: 100%;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.verify-block {
				position: absolute;
				transform-origin: left;
			}

			.verify-refresh {
				opacity: .9;
				right: 4px;
				top: 4px;
				position: absolute;

				/deep/text {
					font-weight: bold !important;
				}
			}
		}

		.verify-slider {
			margin-top: 15px;
			width: 100% !important;
		}
	}
</style>
